<template>
  <div class="banner" :style="styles">
    <div class="banner-image w-full h-full">
      <decoration-img
        width="100%"
        :height="styles.height || height"
        :src="getImage"
        fit="contain"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { PropType } from "vue";
import type options from "./options";
import DecorationImg from "../../decoration-img.vue";
type OptionsType = ReturnType<typeof options>;
const props = defineProps({
  content: {
    type: Object as PropType<OptionsType["content"]>,
    default: () => ({}),
  },
  styles: {
    type: Object as PropType<OptionsType["styles"]>,
    default: () => ({}),
  },
  height: {
    type: String,
    default: "170px",
  },
});

const getImage = computed(() => {
  const { data } = props.content;
  if (Array.isArray(data)) {
    return data[0] ? data[0].image : "";
  }
  return "";
});
</script>

<style lang="scss" scoped></style>
